$(function(){
	//var form_code = '<form id="fileform" action="UserIconSaverServlet"><input id="iconfile" type="file" name="icon"></form>';
	
	/*
	 * form Ĭ�ϵ� enctype �� application/x-www-form-urlencoded
	 * �ϴ��ļ�Ҫ�ĳ� multipart/form-data
	 */
	var form_code = [
		'<form id="fileform" method="post" enctype="multipart/form-data" action="../UserIconSaverServlet">' , 
		'<input id="iconfile" type="file" name="icon">' , 
		'</form>' 
	].join("");
	
	$("#userIcon").on("click" , function(){
		var iframe = document.getElementById("uploader");
		
		// iframe Ԫ����ʹ�����ⲿ��ͬ�� �ĵ����󣬿���ͨ�� contentDocument ���
		// ��õ� contentDocument ����ӵ�и���ҳ�� document ��ͬ�Ľӿڷ���
		iframe.contentDocument.body.innerHTML = form_code;
		
		var fileform = iframe.contentDocument.getElementById("fileform");
		var iconfile = iframe.contentDocument.getElementById("iconfile");
		
		$(iframe).on("load" , function(){
			// iframe �ڲ�Ҳʹ�ú���ҳ�治ͬ�� window ���󣬿���ͨ�� contentWindow ���
			// Servlet ��Ӧ����һ����ɵ� HTML ҳ�棬�������ɵ� JSON �ַ��� ��Ϊ���� response ��ֵ
			// js ��ȫ�ֱ����������� window �����£�����ͨ�� window.ȫ�ֱ����� ��ȥ
			// ���� iframe ��Ҫ�Ȼ�ȡ iframe �Լ��� window ����������ͬ�ķ�������
			var iframe_response = iframe.contentWindow.response;
			
			// ����·�����õ� img Ԫ�أ�����չ�ָ��û�Ԥ��
			$("#userIcon").attr("src" , iframe_response.url);
			
			// ����·�����õ� hidden Ԫ�أ����ڱ��ύ
			$("#icon").val(iframe_response.url);
		});
		
		// ���� file �� onchange �¼���������¼�������
		// ˵���û�ѡ����һ���µ�ͼƬ�����ύ�ñ�����̨
		$(iconfile).on("change" , function(){
			fileform.submit();
		})
		
		// ���� jquery ģ�ⴥ�� file��input �ĵ���¼�
		// file click �¼��������ǣ�������ᵯ���ļ�ѡ��Ի���
		// ����û�ѡ������ file value���Բ�ͬ·�����ļ�
		// �ͻᴥ�� file�� onchange �¼�
		$(iconfile).trigger("click");
	});
});